<script setup>
import router from "../../router/index.js";
import {reactive, ref} from "vue";
import {ElNotification} from "element-plus";
import {register} from "../../api/background/auth.js"

// 用户输入的用户名
let inputUsername = ref();
// 用户输入的密码
let inputPassword = ref();
let loginInfo = reactive({
  username: '',
  password: '',
})
function goLoginPage() {
  router.push("/background/login")
}
function userRegister() {
  loginInfo.username = inputUsername.value;
  loginInfo.password = inputPassword.value;
  register(loginInfo).then(res => {
    localStorage.setItem("token",res.data);
    ElNotification({
      title: '注册成功',
      message: '即将跳转到主页面',
      type: 'success',
    })
    router.push("/background/home")
  }).catch(err => {
    ElNotification({
      title: '注册失败',
      message: err.message,
      type: 'error',
    })
  })
}
</script>

<template>
  <div class="authentication">
    <div class="container">
      <div class="row">
        <div class="login-area">
          <el-card class="login-card">
            <span class="login-title">
              <span class="signup-font-style" style="font-size: 30px" @click="userRegister">注册</span>
              <span class="subtitle-font-style" style="font-size: 15px">开启科技教育之旅</span>
            </span>
            <div class="login-info">
              <div class="input-box">
                <el-input v-model="inputUsername" placeholder="请输入用户名" class="input-style"></el-input>
              </div>
              <div class="input-box">
                <el-input v-model="inputPassword" placeholder="请输入密码" class="input-style" type="password"></el-input>
              </div>
              <div class="login-submit">
                <div class="loginBtn-box">
                <el-button type="success" size="large" @click="userRegister">注册</el-button>
                </div>
                <div class="tips-box">
                  已有帐号?
                  <a class="reg-link" href="#" @click="goLoginPage">去登录</a>
                </div>
              </div>
            </div>
          </el-card>
        </div>
        <div class="login-image">
          <img src="../../assets/image/signin-img-cyan.svg" alt="Sign Image">
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.authentication {
  background-color: #f3f2ef;
  width: 100%;
  display: flex;
  .container {
    width: 100%;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
    margin-right: auto;
    margin-left: auto;
    display: flex !important;
    flex-direction: column !important;
    .row {
      align-items: center !important;
      justify-content: center !important;
      min-height: 100vh !important;
      --bs-gutter-x: 1.5rem;
      --bs-gutter-y: 0;
      display: flex;
      flex-wrap: wrap;
      margin-top: calc(-1 * var(--bs-gutter-y));
      margin-right: calc(-.5 * var(--bs-gutter-x));
      margin-left: calc(-.5 * var(--bs-gutter-x));
      position: relative;
      .login-area {
        width: 420px;
        height: 480px;
        z-index: 2;
        .login-card {
          width: 100%;
          height: 100%;
          .login-title {
            display: flex;
            flex-direction: column;
            align-items: center;
            .signup-font-style {
              display: block;
              font-size: 1.17em;
              margin-block-start: 1em;
              margin-inline-start: 0px;
              margin-inline-end: 0px;
              font-weight: bold;
              unicode-bidi: isolate;
            }
            .subtitle-font-style {
              margin-top: -40px;
              display: block;
              margin-block-start: 1em;
              margin-block-end: 1em;
              margin-inline-start: 0px;
              margin-inline-end: 0px;
              unicode-bidi: isolate;
            }
          }
          .login-info {
            margin-top: 1.2rem !important;
            margin-bottom: 1.5rem !important;
            display: flex;
            unicode-bidi: isolate;
            flex-direction: column;
            align-items: center;
            .input-box {
              position: relative;
              display: flex;
              flex-wrap: wrap;
              align-content: center;
              width: 90%;
              :deep(.el-input__wrapper) {
                margin-top: 10px;
                height: calc(1.5em + 1.1rem)
              }
              // 点击输入框时修改背景颜色及边框颜色
              &:hover {
                :deep(.el-input__wrapper) {
                  background-color: #f3f2ef;
                  border-color: #21aa93;
                }
              }
            }
            .login-submit {
              display: flex;
              flex-direction: column;
              align-items: center;
              margin-top: 3rem !important;
              .loginBtn-box {
                :deep(.el-button) {
                  width: 100%;
                  height: 40px;
                  border-radius: 10px;
                  font-size: 1.17em;
                  border: 1px solid #21aa93;
                  color: #fff;
                  background-color: #21aa93;
                }
              }
              .tips-box {
                text-align: center !important;
                color: #555555;
                display: block;
                margin-block-start: 1.5em;
                margin-block-end: 1em;
                margin-inline-start: 0px;
                margin-inline-end: 0px;
                unicode-bidi: isolate;
                .reg-link {
                  color: #21aa93;
                  float: right;
                  text-decoration: none;
                }
              }
            }
          }
        }
      }
      .login-image {
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
        position: absolute;
        top: 33%;
        left: 20%;
        z-index: 1;
      }
    }
  }
}
</style>